<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .welcome, .addUser{display: none;}
    .loading{position: fixed;left:0;top:0;right:0;bottom:0;background: rgba(200,200,200,0.5);display: none;}
    .loading img{width: 200px;position: absolute;left:0;top:0;right:0;bottom:0;margin:auto;}
    .pageList{display: flex;height: 30px;}
    .pageList span{width:30px;height:30px;border:solid 1px #ccc;text-align: center;line-height: 30px;margin: 0 4px;cursor: pointer;}
    .pageList span.active{background: #66f;color: #fff;}
    </style>
</head>
<body>
  <h2>这是首页</h2>

  <p class="login"><a href="./login.html">登录</a></p>
  <p class="welcome">欢迎<span>xxx</span>，<em>退出</em></p>

  <a href="./insert.html" class="addUser">添加用户信息</a>

  <select class="pageNumber">
    <option value="5">5</option>
    <option value="10" selected>10</option>
    <option value="15">15</option>
    <option value="20">20</option>
  </select>

  <div class="pageList"></div>
  <table border="1" width="800">
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>手机号</th>
        <th>部门编号</th>
        <th>权限</th>
        <th>注册时间</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <div class="loading">
    <img src="./imgs/loading.jpg" alt="">
  </div>
</body>
<script src="../ajax.js"></script>
<script>

  // 获取登录成功后的信息
  const userData = JSON.parse(localStorage.getItem("userData")) || {};

  // 判断是否存在登录成功后的信息
  if(Object.keys( userData ).length < 1){
    // 不存在，未登录
    $(".login").style.display = "block";
    $(".welcome").style.display = "none";
    $(".addUser").style.display = "none";
  }else{
    // 存在，已登录
    $(".login").style.display = "none";
    $(".welcome").style.display = "block";
    $(".addUser").style.display = "block";
    $(".welcome span").innerHTML = userData.uName || userData.username;
  }

  // 点击退出
  $(".welcome em").onclick = function(){
    // 清除登录成功后的信息
    localStorage.removeItem("userData");
    // 刷新页面
    location.reload();
  }

  const getUserUrl = "http://10.11.55.86:3000/getuser";
  const token = userData.token;
  let data;
  // 发起获取用户信息请求
  ajax({
    url: getUserUrl,
    method:"get",
    data: { token },
    beforeSend(){
      // 发起请求之前，显示loading效果
      $(".loading").style.display = "block";
    },
    success(xhr){
      // 解析数据
      const res = JSON.parse(xhr.responseText);
      // 准备拼接页面结构
      let str = "";
      if(res.code === 0){
        str = `<tr><td colspan="5">${res.msg}，请重新<a href="./login.html">登录</a></td></tr>`;
        // 设置到指定视图
        $("tbody").innerHTML = str;
      }else{
        data = res.data;
        // 执行分页功能
        // 生成分页后的页面结构
        new Page({
          data: res.data,
          number: 10,
          index: 0,
          cont: $("tbody"),
          pageCont: $(".pageList")
        });

      }
      // 请求成功后，隐藏loading效果
      $(".loading").style.display = "none";
    }
  })

  // 根据下拉菜单，切换单页显示条数
  $(".pageNumber").onchange = function(){
    new Page({
      data: data,
      number: this.value-0,
      index: 0,
      cont: $("tbody"),
      pageCont: $(".pageList")
    });
  }

  // 分页功能
  class Page{
    constructor( { data=[], number=10, index=0, cont, pageCont} ){
      this.data = data;
      this.number = number;
      this.index = index;
      this.cont =cont;
      this.pageCont = pageCont;

      // 绑定分页事件
      this.addEvent()
      // 根据页码索引和单页数据条数渲染页面结构
      this.render();
      // 生成页码
      this.pageRender();
    }
    addEvent(){
      const that = this;
      // 利用事件委托绑定每个页码的事件
      this.pageCont.onclick = function(eve){
        const e = eve || window.event;
        const target = e.target || e.srcElement;
        if(target.tagName === "SPAN"){
          // 清除上一个页码的高亮样式
          that.pageCont.children[that.index].className = "";
          // 给当前页码添加高亮样式
          target.className = "active";
          // 将当前点击的页码的索引设置给默认索引
          that.index = target.dataset.index-0;
          // 重新渲染页面结构
          that.render();
        }
      }
    }
    pageRender(){
      this.maxPage = Math.ceil(this.data.length / this.number);
      let str = "";
      for(let i=0;i<this.maxPage;i++){
        str += `<span data-index="${i}">${i+1}</span>`;
      }
      this.pageCont.innerHTML = str;
      // 设置默认页码的高亮样式
      this.pageCont.children[this.index].className = "active";
    }
    render(){
      // 0 ~ 10     index0  number10
      // 10 ~ 20    index1  number10
      // 20 ~ 30    index2  number10
      // 30 ~ 40    index3  number10
      // index * number ~ (index + 1) * number
      let str = "";
      for(let i=this.index*this.number; i<(this.index+1)*this.number; i++){
        if(i < this.data.length){
          const val = this.data[i];
          str += `<tr>
                    <td>${i+1}</td>
                    <td>${val.uName}</td>
                    <td>${val.tel}</td>
                    <td>${val.tId}</td>
                    <td>${val.power}</td>
                    <td>${new Date(val.joinTime).toLocaleDateString()}</td>
                  </tr>`;
        }
      }
      this.cont.innerHTML = str;
    }
  }






  function $(s){
    return document.querySelector(s)
  }
  
</script>
</html>